<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <input type="text" value="在此输入内容">
    <span class="msg"></span>
    <script>
        // 获取焦点 清空信息 失去焦点 加入是空 即使不能为空 加入非数字提示不合法 长度<6 长度不够，加入是数字，正确

        let txt = document.querySelector('input')
        let msg = document.querySelector('.msg')
        txt.onfocus = () => {
            txt.value = msg.innerHTML=''
        }
        txt.onblur = () => {
            let val = txt.value

            if (val == '') {
                msg.innerHTML = '输入内容不能为空'
                msg.style.color = 'red'
            }
            else if (val.length < 6) {
                msg.innerHTML = '长度不能小于6位数字'
                msg.style.color = 'red'
            }
            else if (isNaN(val)) {
                msg.innerHTML = '不是纯数字'
                msg.style.color = 'red'
            }
            else {
                msg.innerHTML = '输入合法'
                msg.style.color = 'green'
            }

        }

    </script>
</body>

</html>